<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/date-fr-BE.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/jquery-1.4.4.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/scripts/jquery-ui-1.8.5.custom.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/json.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/common.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/contract.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/new-client-popup.css"/>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/styles/ui-lightness/jquery-ui-1.8.5.custom.css"/>

    <script type="text/javascript">
        $(function () {
            $("#background").ajaxError(function() {
                alert("An error occured");
            });

            $("#submit").click(function() {
                var object = serializeData();
                $.postJSON("../contract/new", serializeData(), function(data) {
                    document.location.href = "../timesheet/view-timesheet.html";
                }, "json");

            });

            $("#client-name").autocomplete({
                source: "../client/autocomplete.html",
                minLength: 1,
                focus: function(event, ui) {
                    $("#client-name").val(ui.item.name);
                    return false;
                },
                select: function(event, ui) {
                    $("#client-name").val(ui.item.name);
                    $("#client-data p.street").html(ui.item.street);
                    $("#client-data p.zipcity").html("<span class=\"zip\">" + ui.item.zip + "</span>&nbsp;<span class=\"city\">" + ui.item.city + "</span>");
                    $("#client-data p.country").html(ui.item.country);
                    $("#client-data p.vat").html(ui.item.vat);
                    $("#client_id").html(ui.item.id);
                    return false;
                }
            }).data("autocomplete")._renderItem = function(ul, item) {
                $("#client-data p.street").html("&nbsp;");
                $("#client-data p.zipcity").html("&nbsp;");
                $("#client-data p.country").html("&nbsp;");
                $("#client-data p.vat").html("&nbsp;");
                $("#client_id").html("&nbsp;");
                return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append("<a>" + item.name + "<br>" + item.zip + "&nbsp;&nbsp;" + item.city + "</a>")
                        .appendTo(ul);
            };

            $("#newclient").dialog({
                autoOpen: false,
                height: 310,
                width: 360,
                modal: true,
                buttons: {
                    "Add": function() {
                        var client = new Object();
                        client.name = $("#newclient input[name=name]").val();
                        client.street = $("#newclient input[name=street]").val();
                        client.zip = $("#newclient input[name=zip]").val();
                        client.city = $("#newclient input[name=city]").val();
                        client.country = $("#newclient input[name=country]").val();
                        client.vat = $("#newclient input[name=vat]").val();

                        $.postJSON("../client/new", client, function(data) {
                            $("#client-name").val(client.name);
                            $("#client-data p.street").html(client.street);
                            $("#client-data p.zipcity").html("<span class=\"zip\">" + client.zip + "</span>&nbsp;<span class=\"city\">" + client.city + "</span>");
                            $("#client-data p.country").html(client.country);
                            $("#client-data p.vat").html(client.vat);
                            $("#client_id").html(data.id);
                        }, "json")
                        $(this).dialog("close");
                    },
                    "Cancel": function() {
                        $(this).dialog("close");
                    }
                }
            });

            $("#add_client").click(function() {
                $("#newclient").dialog("open");
            });
        });

        function serializeData() {
            var contract = new Object();
            contract.reference = $("#reference").val();
            contract.validFrom = Date.parse($("#validFrom").val());
            contract.validTill = Date.parse($("#validTill").val());
            contract.hourlyRate = $("#hourlyRate").val();

            var client = new Object();
            client.name = $("#client-name").val();
            client.street = $("#client div.data p.street").html();
            client.zip = $("#client div.data p.zipcity span.zip").html();
            client.city = $("#client div.data p.zipcity span.city").html();
            client.country = $("#client div.data p.country").html();
            client.vat = $("#client div.data p.vat").html();
            client.id = $("#client_id").html();
            contract.client = client;

            return contract;
        }

    </script>
    <title>Quattroclix - Invoicing</title>
</head>
<body>
<div id="newclient" title="New Client">
    <form>
        <div class="newclient_label"><label for="name">Name</label></div>
        <div class="newclient_data">
            <input type="text" name="name" id="name"/></div>
        <div class="newclient_label"><label for="street">Street</label></div>
        <div class="newclient_data"><input type="text" name="street" id="street" value=""/></div>
        <div class="newclient_label"><label for="zip">Zip</label></div>
        <div class="newclient_data"><input type="text" name="zip" id="zip" value=""/></div>
        <div class="newclient_label"><label for="city">City</label></div>
        <div class="newclient_data"><input type="text" name="city" id="city" value=""/></div>
        <div class="newclient_label"><label for="country">Country</label></div>
        <div class="newclient_data"><input type="text" name="country" id="country" value=""/></div>
        <div class="newclient_label"><label for="vat">VAT</label></div>
        <div class="newclient_data"><input type="text" name="vat" id="vat" value=""/></div>
    </form>
</div>

<div id="background">
    <div class="wraper">
        <div id="header">
            <a href="index.html">
                <img src="../../img/logo.gif" width="257" height="36" id="logo"
                     alt="logo Quattroclix"/>
            </a>

            <div id="menu">
                <ul>
                    <li class="first"><a class="active" href="../contract/new-contract.html">New Contract</a></li>
                    <li><a href="../invoice/new-invoice.html">New Invoice</a></li>
                    <li><a href="../invoice/view-invoice.html">View Invoice</a></li>
                    <li><a href="../timesheet/new-timesheet.html">New Timesheet</a></li>
                    <li><a href="../timesheet/view-timesheet.html">View Timesheet</a></li>
                </ul>
            </div>
        </div>
        <div id="contract">
            <div id="contract-data">
                <div class="label-value">
                    <div class="label">Reference</div>
                    <div class="value">
                        <input type="text" id="reference" size="30" value=""/>
                    </div>
                </div>
                <div class="label-value">
                    <div class="label">Valid from</div>
                    <div class="value">
                        <input type="text" id="validFrom" size="30" value=""/>
                    </div>
                </div>
                <div class="label-value">
                    <div class="label">Valid till</div>
                    <div class="value">
                        <input type="text" id="validTill" size="30" value=""/>
                    </div>
                </div>
                <div class="label-value">
                    <div class="label">Hourly rate</div>
                    <div class="value">
                        <input type="text" id="hourlyRate" size="30" value=""/>
                    </div>
                </div>
            </div>
            <div id="client">
                <div class="label-value">
                    <div class="label">Client:</div>
                    <div class="value">
                        <input id="client-name" class="client-name"/>
                    </div>
                    <a id="add_client" href="new-contract.html#">
                        <img src="../../img/add.png" alt="PLUS"/>
                    </a>
                </div>
                <div id="client-data">
                    <p class="street">&nbsp;</p>
                    <p class="zipcity"><span class="zip">&nbsp;</span>&nbsp;<span class="city">&nbsp;</span></p>
                    <p class="country">&nbsp;</p>
                    <p class="vat">&nbsp;</p>
                </div>
                <div id="client_id">&nbsp;</div>
            </div>
        </div>
        <div id="actions">
            <ul>
                <li><a class="text" id="submit" href="new-contract.html#">Submit</a></li>
            </ul>
        </div>
    </div>
</div>
</body>

</html>
